import React, { useRef, useEffect, useState } from 'react';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import { reloadTab } from '@/utils/utils';
import { AdminType } from '@/common/contact';
import { notification } from 'antd';
import { Button, Modal, Tag, Space } from 'antd';
const AuthFormSetting = (props) => {
  const {
    visible = false,
    onClose,
    loading,
    organizationAuthAdminList,
    dispatch,
    uploadList = [],
    handleCallback,
    searchType = '',
    onBack
  } = props;
  const { show = false, type = 'keyword', id, values = {}, assignAdmin } = visible
  useEffect(() => {
    if (!show) {
      setSelectedRowKeys([])
    } else {
      // if (assignAdmin && typeof assignAdmin === 'string') {
      //   setSelectedRowKeys(assignAdmin.split(',').map(item => { return item }))
      // }
    }
  }, [show])
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const rowSelection = {
    type: 'checked',
    preserveSelectedRowKeys: true,
    onSelect: (record, selected, selectedRows) => {
      const { id } = record;
      if (selected) {
        setSelectedRowKeys([...selectedRowKeys, record]);
      } else {
        setSelectedRowKeys(
          selectedRowKeys.filter((item) => {
            return item.id != id;
          }),
        );
      }
    },
    onSelectAll: (selected, selectedRowsKey, changeRows) => {
      let selectedRows = selectedRowsKey.filter((val) => {
        if (val) {
          return true;
        }
      });
      if (selected) {
        setSelectedRowKeys([
          ...selectedRowKeys,
          ...selectedRows.reduce((item, val) => {
            let flag = true;
            selectedRowKeys.forEach((o) => {
              if (o.id == val.id) {
                flag = false;
              }
            });
            if (flag) {
              return [...item, val];
            }
            return item;
          }, []),
        ]);
      } else {
        setSelectedRowKeys(
          selectedRowKeys.reduce((item, val) => {
            let flag = true;
            changeRows.forEach((o) => {
              if (o.id == val.id) {
                flag = false;
              }
            });

            if (flag) {
              return [...item, val];
            }
            return item;
          }, []),
        );
      }
    },
    selectedRowKeys: selectedRowKeys.map(item => {

      return item.id.toString()
    })
  }
  const requesturl = {
    keyword: 'user/fakeKeywordAssignAdmin',
    user: 'user/fakeUserAssignAdmin',
    video: 'user/fakeVideoAssignAdmin',
    comment: 'user/fakeCommentAssignAdmin',
    allComment: 'user/fakeCommentAssignAdmin',
    userAdmin: 'user/fakeUserAssignListAdmin',
    userAllAdmin: 'user/fakeUserAssignListAdmin',
    batchUserStage: 'user/fakeBatchChangeUserStage',
    userStage: 'user/fakeChangeUserStage'
  }[type];
  const childRef = useRef();

  const searchItems = [
    {
      label: '员工姓名',
      name: 'keyword',
    },
  ];
  // 确认提交
  const handleUpAudit = () => {
    if (type === 'comment') {
      dispatch({
        type: requesturl,
        payload: {
          commentIdList: [id],
          assignAdminId: selectedRowKeys.map((item) => {
            return item.id;
          }).toString(),
          assignAdminNames: selectedRowKeys.map((item) => {
            return item.username;
          }).toString(),
        },
        callback: (e) => {
          onClose();
          handleCallback();
        },
      });
    } else if (type === 'allComment') {
      if (uploadList.length === 0) {
        return notification.warn({
          message: '温馨提示',
          description: `请先选择要分配的视频`,
        });
      }
      dispatch({
        type: requesturl,
        payload: {
          commentIdList: uploadList,
          assignAdminId: selectedRowKeys.map((item) => {
            return item.id;
          }).toString(),
          assignAdminNames: selectedRowKeys.map((item) => {
            return item.username;
          }).toString(),
        },
        callback: (e) => {
          onClose();
          handleCallback();
        },
      });
    } else if (type === 'userAdmin') {
      dispatch({
        type: requesturl,
        payload: {
          userIdList: [id],
          assignAdminId: selectedRowKeys.map((item) => {
            return item.id;
          }).toString(),
          assignAdminNames: selectedRowKeys.map((item) => {
            return item.username;
          }).toString(),
        },
        callback: (e) => {
          onClose();
          handleCallback();
        },
      });
    } else if (type === 'userAllAdmin') {
      if (uploadList.length === 0) {
        return notification.warn({
          message: '温馨提示',
          description: `请先选择要分配的视频`,
        });
      }
      dispatch({
        type: requesturl,
        payload: {
          userIdList: uploadList,
          assignAdminId: selectedRowKeys.map((item) => {
            return item.id;
          }).toString(),
          assignAdminNames: selectedRowKeys.map((item) => {
            return item.username;
          }).toString(),
        },
        callback: (e) => {
          onClose();
          handleCallback();
        },
      });
    } else if (type === 'batchUserStage') {
      if (uploadList.length === 0) {
        return notification.warn({
          message: '温馨提示',
          description: `请先选择要流转的用户`,
        });
      }
      dispatch({
        type: requesturl,
        payload: {
          organizationUserIdList: uploadList,
          organizationAdminId: val,
        },
        callback: (e) => {
          onClose();
          handleCallback();
        },
      });
    } else if (type === 'userStage') {
      dispatch({
        type: requesturl,
        payload: {
          organizationUserId: id,
          organizationAdminId: val,
          ...values
        },
        callback: (e) => {
          onClose();
          handleCallback();
        },
      });
    } else {
      dispatch({
        type: requesturl,
        payload: {
          id,
          assignAdminId: selectedRowKeys.map((item) => {
            return item.id;
          }).toString(),
          assignAdminNames: selectedRowKeys.map((item) => {
            return item.username;
          }).toString(),
        },
        callback: (e) => {
          onClose();
          handleCallback();
        },
      });
    }
  };
  const getColumns = [
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '岗位类型',
      dataIndex: 'adminType',
      render: (e) => {
        return AdminType[e];
      },
    },

  ];
  const modalProps = {
    title: `请选择您需要分配的账号`,
    width: 900,
    visible: typeof visible === 'boolean' ? visible : show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    confirmLoading: loading,
  };

  return (
    <Modal {...modalProps} onCancel={onClose} onOk={handleUpAudit}>
      <TableDataBlock
        rowSelection={rowSelection}
        searchItems={searchItems}
        cRef={childRef}
        loading={loading}
        noCard={true}
        columns={getColumns}
        params={{
          searchType,
          invalidStatus: '1',
        }}
        rowKey={(record) => `${record.id}`}
        dispatchType="weCom/fetchSearchOrganizationAdmin"
        {...organizationAuthAdminList}
      ></TableDataBlock>
    </Modal>
  );
};

export default connect(({ weCom, loading }) => ({
  ...weCom,
  loading: loading.models.weCom || loading.models.user,
}))(AuthFormSetting);
